<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>fd</title>
    <style>
        #d1 {
            width: 600px;
            height: 400px;
            background-color: skyblue;
        }

        img {
            /*实现文字环绕图片，文字环绕文字*/
            float: left;
            margin-right: 0.5em;
        }

        .outer {
            width: 800px;
            height: 400px;
            background-color: skyblue;
            padding: 10px;
            text-align: center;
        }

        .box {
            font-size: 20px;
            padding: 10px;

        }

        .box1 {
            background-color: red;
        }

        .box2 {
            /*无论是块，行内，行内块，浮动后都要按浮动规则来*/
            /*浮动后块元素不占一行,浮动后块元素宽度不再默认撑满父容器*/
            /*1.使用浮动后脱离文档流*/
            /*2.浮动后，宽高尽可能窄，默认情况都是被内容撑开,但也可以设置*/
            /*3.浮动后，margin都是完美的，不会出现隐藏问题*/
            /*4.浮动后，元素不会像行内块一样被当成文本处理*/
            background-color: green;
            float: left;
            margin-top: 10px;

        }
        .box3 {
            background-color: blue;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="d1">
    <img src="../../images/浮动特点.png" width="400px">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident debitis deserunt laborum voluptatem, quas ab
    incidunt eum possimus libero. Natus aliquid, expedita in doloribus minima ut, dolor quas a labore aspernatur eius
    nihil corrupti nisi minus provident, voluptate fugit. Nobis, reprehenderit repellendus dolorem soluta aut numquam
    corrupti quis fugiat at et molestias labore quasi consequatur, perferendis vel incidunt natus dicta! Explicabo
    possimus ab cumque maxime incidunt officiis repellat! Numquam esse, aliquid optio nam id necessitatibus aspernatur
    laboriosam fugit ipsam quis placeat totam nemo nostrum soluta recusandae, hic, dolores sequi incidunt! Deserunt
    voluptatum quia velit quae eligendi adipisci perferendis incidunt provident?
</div>
<hr>
<div class="outer">
    <div class="box box1">盒子1</div>
    <div class="box box2">盒子2</div>
    <div class="box box3">盒子3</div>
</div>

</body>
</html>